<template>
  <div class="section-box">
    <div v-loading.fullscreen.lock="fullscreenLoading" class="main_index_left"
      element-loading-background="rgba(0, 0, 0, 0.4)">
      <div class="leftTitle">
        概览信息
      </div>
      <div class="ly_area">
        <div>
          <!-- <div>0</div> -->
          <div v-for="(item, index) in areas" :key="index">{{ item }}</div>
        </div>
        <div><span>流城面积（平方公里）</span></div>
      </div>
      <!-- 侧边栏内容区 -->
      <div class="list">
        <div>
          <span>{{ wswscdInfo.town }}</span>
          <div>乡镇数（个）</div>
        </div>
        <div>
          <span>{{ wswscdInfo.fzcNum }}/{{ wswscdInfo.villageNum }}/{{ wswscdInfo.villageZuNum }}</span>
          <div>防治村/行政村/自然村（个）</div>
        </div>
        <div>
          <span>{{ wswscdInfo.peoNum }}</span>
          <div>人口（人）</div>
        </div>
        <div>
          <span>{{ wswscdInfo.qsyNum }}</span>
          <div>企事业单位数（个）</div>
        </div>
        <div>
          <span>{{ wswscdInfo.danNum }}</span>
          <div>危险区数量（个）</div>
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <div class="main_index_btm">
      <!-- 山洪预警 -->
      <div v-loading.fullscreen.lock="loadingshyj" element-loading-background="rgba(0, 0, 0, 0.4)">
        <div class="top_title_main">
          <div>山洪预警</div>
          <div>{{ shyjTime || '' }}</div>
        </div>
        <div class="tab">
          <span v-for="(item, index) in tabTitList" :key="index" :class="{ activeTab: selectNum == index }" class="tabTit"
            @click="change(index)">
            {{ item }}
          </span>
        </div>
        <div v-show="selectNum == 0" class="Fengxian">
          <div style="color: #B2C7D9;height:26px" class="fengliact">
            <span>预警类别</span><span>6h</span><span>12h</span><span>24h</span></div>
          <div>
            <ul>
              <li v-for="(item, index) in statisticsThree.FengXian.Deail" :key="index" class="fengliact">
                <span :class="'fxlv' + item.Lvl">{{ item.Txt }}</span><span>{{ item.SixCount }}</span><span>{{
                  item.twelveCount }}</span><span>{{ item.twentyFourCount }}</span>
              </li>
            </ul>
          </div>
        </div>
        <div v-show="selectNum == 1" class="yubaoyuj">
          <div>
            <div>
              <el-radio v-model="yubaoRadio" label="1">小流域</el-radio>
              <el-radio v-model="yubaoRadio" label="2">区县</el-radio>
            </div>
            <div style="font-size: 14px;color: #A5C2D8;">
              <span v-show="yubaoRadio == 1">村庄 <span style="color: #fff;">{{ statisticsThree.YuBaoHD.Village }}</span>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;河段 <span style="color: #fff;">{{ statisticsThree.YuBaoHD.River
                }}</span></span>
              <span v-show="yubaoRadio == 2">村庄 <span style="color: #fff;">{{ statisticsThree.YuBao.Village
              }}</span></span>
            </div>
          </div>
          <div v-show="yubaoRadio == 1" class="yubaoyujHd">
            <ul>
              <li v-for="(item, index) in statisticsThree.YuBaoHD.Deail" :key="index" class="fengliact">
                <span :class="['YuBaoHD' + item.Lvl, 'colorFx' + item.Lvl]">{{ item.Txt }}</span>
                <span style="font-size: 14px;color: #A5C2D8;"> 村庄<span style="color: #fff;">{{ item.VillageCount
                }}</span></span>
                <span style="font-size: 14px;color: #A5C2D8;"> 河段<span style="color: #fff;">{{ item.Count }}</span></span>
              </li>
            </ul>
          </div>
          <div v-show="yubaoRadio == 2" class="yubaoyujQx">
            <ul>
              <li v-for="(item, index) in statisticsThree.YuBao.Deail" :key="index">
                <div :class="'YuBaoHD' + item.Lvl" />
                <div>{{ item.Txt }}</div>
                <div>{{ item.Count }}</div>
              </li>
            </ul>
          </div>
        </div>
        <div v-show="selectNum == 2" class="jcyj_indexMain">
          <div>
            <div>
              <img src="../../../assets/newimg/village.png" alt="">
              <div>{{ statisticsThree.JianCe.Total }}</div>
              <div>村庄总数</div>
            </div>
          </div>
          <div class="item" style="width:50%" v-for="(item, index) in statisticsThree.JianCe.Deail" :key="index">
            <div :class="'YuBaoHD' + item.Lvl" />
            <div>
              <div>{{ item.Count }}</div>
              <div>{{ item.Txt }}</div>
            </div>
          </div>

        </div>
      </div>
      <!-- 降雨监测 -->
      <div v-loading.fullscreen.lock="loadingjyjc" element-loading-background="rgba(0, 0, 0, 0.4)">
        <div class="top_title_main">
          <div>降雨监测</div>
          <div>{{ jyjcTime || '' }}</div>
        </div>
        <div class="StationRainListdiv">
          <Newecharts id="StationRainListCharts" style="width:100%;height:100%" :option="StationRainListCharts" />
        </div>
      </div>
      <!-- 预报降雨 -->
      <div v-loading.fullscreen.lock="loadingybjy" element-loading-background="rgba(0, 0, 0, 0.4)">
        <div class="top_title_main">
          <div style="margin-left:15px">预报降雨</div>
        </div>
        <div class="yjyy_indexMain">
          <div v-show="RainInfo.length > 0" v-for="(item, index) in RainInfo" :key="index">
            <div>
              <div><img src="../../../assets/newimg/time.png" alt="" style="margin-right:6px">{{ item.step }}小时</div>
              <div>{{ $moment(item.sinceTime).format('MM/DD HH:ss') }}</div>
            </div>
            <div>
              <div>
                <div>
                  <div>面雨量</div>
                  <div>{{ item.avgdrp }}mm</div>
                </div>
              </div>
              <div>
                <div>
                  <div>最大格点雨量</div>
                  <div>{{ item.drp }}mm</div>
                </div>
              </div>
            </div>
          </div>
          <img v-show="RainInfo.length == 0" src="../../../assets/dialog/NoDataicon.png" style="width: 129px;height: 150px;transform: translateY(47px);">
        </div>
      </div>
      <!-- 洪峰流量 -->
      <div v-loading.fullscreen.lock="loadinghd" element-loading-background="rgba(0, 0, 0, 0.4)">
        <div class="top_title_main">
          <div>洪峰流量</div>
          <!-- <div>{{ $moment(statisticsInfo.period_End).format('MM月DD日HH时') }}</div> -->
          <div>{{ $moment(statisticsInfo.period_End).format('MM/DD HH:ss') }}</div>
        </div>
        <div class="StationRainListdiv">
          <div class="Newecharts_main">
            <Newecharts id="indexMainCharts" style="width:100%;height:100%" :option="indexMainCharts" />
          </div>
          <div class="Newecharts_list">
            <div v-for="(item, index) in statisticsInfo.floodList" :key="index">
              <span><i style="" :class="'riverColorLevel' + item.levelNum" />{{ item.level }}</span>
              <span>{{ item.levelCount }}</span>
              <span>{{ item.proportion }}%</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 右侧时间选择 -->
    <div class="right_time">
        <el-date-picker
          v-model="timeRange"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          @change="selectTime(timeRange)"
          >
        </el-date-picker>
    </div>
    <!-- 站点详情 -->
    <Dlgdiv v-if="this.$store.getters.dlgParams.name === 'RainInfo'" mask class="MeasuredDlgStyle">
      <template v-slot:title> 站点详情 </template>
      <template v-slot:body>
        <MeasuredDlg />
      </template>
    </Dlgdiv>
    <!-- 村庄详情 -->
    <!-- <Dlgdivv v-if="this.$store.getters.dlgParams.name=='FZCCuZINFO'" :title="false" mask  class="DlgStyle">
      <template v-slot:title>防治村详情</template>
      <template v-slot:body>
        <Dlgyyfxd :listStyleobj="ListStyleobj" :tablist="['5']" />
      </template>
    </Dlgdivv> -->
    <!-- 12.8新加 -->
    <Dlgdivv v-if="this.$store.getters.dlgParams.name=='FZCCuZINFO'" :title="false" mask  class="DlgStyle1">
      <template v-slot:title>详情</template>
      <template v-slot:body>
        <Dlgyyfxd :listStyleobj="ListStyleobj" />
      </template>
    </Dlgdivv>
    <!-- end -->
  </div>
</template>
<script>
import Newecharts from '../../components/newecharts.vue'
import * as echarts from 'echarts'
import MeasuredDlg from '@/views/components/MeasuredDlg.vue'
import { GetWswscdInfo, GetIndexRain, GetIndexStatistics, GetBasinStationRainList, GetAllWarningStatistics } from '@/api/xuna.js'
export default {
  name: 'IndexMain',
  components: {
    Newecharts,
    MeasuredDlg,
  },
  data() {
    return {
      // 时间选择
      // timeRange: ['2022-06-13 00:00:00','2022-06-13 23:59:59'],
      timeRange: this.$store.getters.startTimeCommon,

      areas: [],//概览信息的流域面积数组 用来做循环
      selectNum: 0,
      yubaoRadio: '1',
      fullscreenLoading: false,
      loadingshyj: false,
      loadingjyjc: false,
      loadinghd: false,
      loadingybjy: false,
      // tabTitList: ['风险预警', '预报预警', '监测预警'],
      tabTitList: ['风险预警', '临近预警', '监测预警'],
      indexMainCharts: {},
      wswscd: this.$store.getters.basin,
      wswscdInfo: {}, // 概览
      RainInfo: [], // 预报降雨
      statisticsInfo: [], // 河道统计
      StationRainListCharts: {},
      jyjcTime: '',
      shyjTime: '',
      statisticsThree: {
        FengXian: {},
        JianCe: {},
        YuBao: {},
        YuBaoHD: {}
      },// 三种统计
      ListStyleobj: {
        'stTime': this.$moment().format('YYYY-MM-DD 08:00'),
        'enTime': this.$moment().format('YYYY-MM-DD HH:mm')
      },
    }
  },
  computed: {
    basin() {
      return this.$store.getters.basin
    }
  },
  watch: {
    basin: {
      handler: function (name) {
        this.$nextTick(() => {
          this.wswscd = name
          this.getGetWswscdInfo()
          this.getGetIndexRain()
          this.getGetIndexStatistics()
          this.getGetBasinStationRainList()
          this.getGetAllWarningStatistics()
        })
      },
      immediate: true
    },
    timeRange:{
      handler: function () {
        this.$nextTick(() => {
          this.getGetWswscdInfo()
          this.getGetIndexRain()
          this.getGetIndexStatistics()
          this.getGetBasinStationRainList()
          this.getGetAllWarningStatistics()
        })
      },
      immediate: true
    }
  },
  beforeDestroy() {
    this.$eventBus.$emit('EB_YB_SCJY', false)
  },
  created() {
    // console.log(this.$store.getters.rightFold)
    if (!this.$store.getters.rightFold) {
      this.$store.dispatch('rightFold', true)
    }
  },
  mounted() {
    this.$eventBus.$on('FZCINFO', res => {
      this.$store.getters.dlgParams.params = {
        'Ewcode': res.ADCD,
        'strBegin': '',
        'strEnd': '',
        'stcd': ''
      }
      this.$store.getters.dlgParams.name = 'FZCCuZINFO'
      
    })
  },
  methods: {
    // 自定义时间
    selectTime(val) {
            if (val) {
                this.timeRange = val
                // 底部参数查询时间（预报预警默认时间）
                this.$store.dispatch('startTimeCommon', val+' 00:00')
                this.$store.dispatch('endTimeCommon', val+' 23:59')
            }
        },
    // ====
    change(index) {
      this.selectNum = index
    },
    // 概览
    getGetWswscdInfo() {
      this.fullscreenLoading = true
      GetWswscdInfo({ id: this.wswscd }).then((res) => {
        this.fullscreenLoading = false
        this.wswscdInfo = res.data
        this.areas = (res.data.area + '').slice('')
      })
    },
    // 预报降雨
    getGetIndexRain() {
      this.loadingybjy = true
      GetIndexRain({ wswscd: this.wswscd }).then((res) => {
        this.loadingybjy = false
        this.RainInfo = res.data
      })
    },
    // 河道流量统计
    getGetIndexStatistics() {
      this.loadinghd = true
      GetIndexStatistics({ wswscd: this.wswscd }).then((res) => {
        this.loadinghd = false
        this.statisticsInfo = res.data
        let numriver = 0
        res.data.floodList.map((v) => {
          numriver += v.levelCount
        })
        this.getFxecharts(res.data.floodList, numriver)
      })
    },
    // 实测降雨
    getGetBasinStationRainList() {
      this.loadingshyj = true
      // 当前时间是12点以前 取前一天 8点 如果是12点以后 取当天8点
      //    let dayy1 = this.$moment().format('YYYY-MM-DD HH:mm');
      //    let dayy = this.$moment().format('YYYY-MM-DD');
      //    let dayy2 = dayy + ' 12:00'
      //    let beday = this.$moment().subtract(1, 'days').format('YYYY-MM-DD');

      //   let daflg =  this.$moment(dayy2).isBefore(dayy1);
      //  //console.log(daflg)
      //   let dtBegins = '';
      //   if(daflg){
      //     dtBegins = dayy+' 8:00'
      //   }else{
      //     dtBegins =  beday+' 8:00'
      //   };
      // alert(dtBegins)
      const param = {
        dtBegin: this.$store.getters.startTimeCommon, // dtBegins
        dtEnd: this.$store.getters.endTimeCommon,
        wswscd: this.wswscd,
        limit: 10,
        page: 1,
        type: '1'
      }
      GetBasinStationRainList(param).then((res) => {
        this.$eventBus.$emit('EB_YB_SCJY', true, res.data, param)
        this.loadingshyj = false
        const stationNumListX = []
        const stationNumListY = []
        res.data.stationNumList.map((v) => {
          stationNumListX.push(v.key)
          stationNumListY.push(v.value)
        })
        console.log('降雨监测的时间：',res.data);
        
        const Time = this.$moment(res.data.period_Begin).subtract().format('MM/DD HH:mm') + '-' + this.$moment(res.data.period_End).subtract().format('MM/DD HH:mm')
        this.jyjcTime = Time
        this.getStationRainListCharts(stationNumListX, stationNumListY)
      })
    },
    // 河道饼图
    getFxecharts(list, num) {
      const colorList = ['#7FD165', '#309EF3', '#E8E500', '#F2A408', '#EF3C45', '#964FD2', '#C93EC0']
      this.indexMainCharts = {
        tooltip: {
          trigger: 'item',
           textStyle:{
                      color: '#ffffff',
                    },
          backgroundColor:'rgba(2,0,31,0.65)',
          borderColor:'rgba(2,0,31,0.65)',
        },
        legend: {
          show: false
        },
        color: colorList,
        series: [
          {
            name: false,
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 0
            },
            label: {
              normal: {
                show: false,
                position: 'center',
                color: '#4c4a4a',
                // formatter: '{total|' + num + '个}' + '\n\r' + '{active|河段}',
                rich: {
                  total: {
                    fontSize: 14,
                    fontFamily: '微软雅黑',
                    color: '#fff'
                  },
                  active: {
                    fontFamily: '微软雅黑',
                    fontSize: 16,
                    color: '#fff'
                  }
                }
              },
              emphasis: { // 中间文字显示
                show: false
              }
            },
            labelLine: {
              show: false
            },
            data: list.map((v, index) => {
              return {
                value: v.levelCount,
                name: v.level,
                color: colorList[index]
              }
            })
          }
        ]
      }
    },
    // 实测降雨
    getStationRainListCharts(stationNumListX, stationNumListY) {
      const colorList = ['#fe0000', '#fe09ff', '#3f34ff', '#5ab4fe', '#47c046', '#a3f78b', '#ccc']
      this.StationRainListCharts = {
        tooltip: {
          trigger: 'axis',
          triggerOn: 'mousemove',
          confine: true,
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          },
          textStyle:{
                      color: '#ffffff',
          },
          backgroundColor:'rgba(2,0,31,0.65)',
          borderColor:'rgba(2,0,31,0.65)',
          formatter: function (params) {
            var tar = params[0]
            // console.log(tar)
            return tar.name + '<br/>' + '站点数: ' + tar.value
          }
        },
        xAxis: {
          type: 'category',
          data: stationNumListX,
          axisLabel: {
            textStyle: {
              fontSize: 10,
              color: '#fff'
            },
            interval: 0
          }

        },
        grid: {
          x: 35,
          y: 35,
          x2: 25,
          y2: 25
        },
        yAxis: {
          type: 'value',
          name: '单位: 个',
          nameTextStyle: {
            color: '#fff',
            fontSize: 12
          },
          axisLabel: {
            textStyle: {
              fontSize: 10,
              color: '#A9CCE1'
            }
          },
          splitLine: {
            show: true, // 去掉网格线
            lineStyle: {
              color: ['#99999959'],
              width: 1,
              type: 'dashed'
            }
          }
        },
        series: [
          {
            // data: stationNumListY.map((item, index) => {
            //     return {
            //         value: item,
            //         itemStyle: {
            //             // color: colorList[index]
            //             color:new echarts.graphic.LinearGradient(0, 0, 1, 1, [
            //               {
            //                 offset: 0,
            //                 color: '#3861fb'
            //               },
            //               {
            //                 offset: 1,
            //                 color: '#2fc0d2'
            //               }
            //           ])
            //         }
            //     }
            // }),
            data: stationNumListY,
            type: 'bar',
            barWidth: 15,
            itemStyle: {
              normal: {
                barBorderRadius: [4, 4, 0, 0],
                // 渐变了
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  // { offset: 0, color: '#83bff6' },
                  // { offset: 1, color: '#188df0' }
                  
                   { offset: 0, color: '#00E4FF' },
                   { offset: 1, color: '#0039BB' },
                ])
              }
            },
            label: {
              show: false,
              position: 'top',
              color: '#fff'
            },
            // showBackground: false,
            showBackground: false,
            backgroundStyle: {
              color: '#334042'
            }
          }
        ]
      }
    },
    // 三个统计
    getGetAllWarningStatistics() {
      this.loadingshyj = true
      const param = {
        dtBegin: this.$store.getters.startTimeCommon,
        dtEnd: this.$store.getters.endTimeCommon,
        wswscd: this.wswscd,
        type: '1'
      }
      GetAllWarningStatistics(param).then((res) => {
        this.loadingshyj = false
        // console.log(res.data)
        
        console.log('山洪预警的时间：',res.data);
        this.statisticsThree = res.data
        const Time = this.$moment(res.data.period_Begin).subtract().format('MM/DD HH:mm') + '-' + this.$moment(res.data.period_End).subtract().format('MM/DD HH:mm')
        this.shyjTime = Time
      })
    }
  }
}
</script>
<style lang="less" scoped>

.MeasuredDlgStyle {
  width: 70% !important;
  // height: 700px !important;
  left: 15%;
  top: 5%
}
.DlgStyle1 {
  width: 70% !important;
  height: 700px !important;
  left: 15%;
  top: 8%
}


.tab {
  margin: 5px auto;
  justify-content: space-between;
}

.tab .tabTit {
  font-size: 14px;
  width: 32%;
  box-sizing: border-box;
}

.main_index_btm {
  width: 100%;
  height: 280px;
  position: absolute;
  bottom: 0;
  z-index: 10;
  left: 0;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;

  &>div {
    margin: 0 10px;
    background: url(../../../assets/newimg/smallcontent.png) no-repeat left center;
    background-size: 100% 100%;
  }

  .YuBaoHD1 {
    background: url(../../../assets/newimg/YuBao1.png) no-repeat left center;
  }

  .YuBaoHD2 {
    background: url(../../../assets/newimg/YuBao2.png) no-repeat left center;
  }

  .YuBaoHD3 {
    background: url(../../../assets/newimg/YuBao3.png) no-repeat left center;
  }

  .YuBaoHD4 {
    background: url(../../../assets/newimg/YuBao4.png) no-repeat left center;
  }

  .Fengxian,
  .yubaoyujHd {
    padding: 0 16px;

    ul,
    li {
      width: 100%;
    }

    li {
      height: 40px;
      line-height: 40px;
    }

    .fengliact {
      height: 36px;
      margin-top: 4px;
      line-height: 32px;
      background: rgba(0, 150, 255, 0.3);

      span {
        &:nth-child(1) {
          background-size: 22px;
          background-position: 10px 5px;
        }
      }
    }

    div,
    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;

      span {
        width: 22%;
        text-align: center;
        font-size: 14px;

        &:nth-child(1) {
          width: 45%;
          text-align: left;
          text-indent: 20px;
          background-size: 20px 20px;
          background-position: 10px 6px;
          padding-left: 16px;
        }
      }

      .fxlv1 {
        background: url(../../../assets/newimg/fxLv1.png) no-repeat left center;
        background-size: 100%;
      }

      .fxlv2 {
        background: url(../../../assets/newimg/fxLv2.png) no-repeat left center;
        background-size: 100%;

      }

      .fxlv3 {
        background-size: 100%;

        background: url(../../../assets/newimg/fxLv3.png) no-repeat left center;
      }

      .fxlv4 {
        background-size: 100%;

        background: url(../../../assets/newimg/fxLv4.png) no-repeat left center;
      }

    }
  }

  .yubaoyuj {
    >div {
      &:nth-child(1) {
        justify-content: space-between;
        width: 100%;
        display: flex;
        padding-right: 20px;
      }
    }

    .el-radio {
      background: none;
      display: inline;
      margin-left: 20px;
    }

    li span {
      width: 33%;
      line-height: 15px;

      &:nth-child(1) {
        width: 25%;
        line-height: inherit;
        background-position: 10px 8px
      }
    }

    .yubaoyujQx {
      li {
        float: left;
        width: 25%;
        text-align: center;
        margin: 20px 0;

        >div {
          &:nth-child(1) {
            width: 40px;
            height: 40px;
            margin: 0 auto;
            background-size: contain;
          }

          &:nth-child(2) {
            margin: 5px 0 10px 0;
          }
        }
      }
    }
  }

  .Newecharts_list {
    width: 55%;
    float: left;
    margin: 6px 0;
    padding: 4px;

    >div {
      margin-bottom: 4px;
      background: rgba(0, 150, 255, 0.3);
      ;
      padding: 4px 10px;
      display: flex;
      justify-content: space-between;
      font-size: 14px;

      span {
        width: 23%;

        &:nth-child(1) {
          width: 50%;
          text-align: left;
        }
      }
    }

    i {
      display: inline-block;
      width: 12px;
      height: 12px;
      margin-right: 5px;
      vertical-align: text-bottom;
    }
  }

  .Newecharts_main {
    width: 40%;
    height: 100%;
    float: left;
  }

  >div {
    width: 22%;
    float: left;

    position: relative;

    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 1px;
    }

    &:nth-child(2) {
      width: 24%;
    }

    &:nth-child(3) {
      width: 27%;

      .yjyy_indexMain {
        display: flex;
        justify-content: space-around;
        height: 100%;
        width: 100%;
        padding: 0 8px;

        &>div {
          font-size: 16px;
          width: 100%;
          padding: 0 8px;

          /*时间*/
          &>:nth-child(1) {
            text-align: center;
            margin: 5px 0;

            &>:nth-child(2) {
              font-size: 14px;
              font-family: 'Number';
              color: #3bf5f6;
            }
          }

          &>:nth-child(2) {
            height: calc(100% - 110px);
            width: calc(100%);
            padding: 0 10px;
            border-radius: 6px;
            background: rgba(0, 150, 255, 0.3);

            &>div {
              height: 50%;

              &>:nth-child(1) {
                height: max-content;
                transform: translate(10px, 30px);
                background: url(../../../assets/newimg/矩形.png) no-repeat left center;
                text-indent: 10px;

                &>:nth-child(1) {
                  font-size: 12px;
                  color: #A5C2D8;
                }

                &>:nth-child(2) {
                  font-size: 14px;
                  color: #fff;
                  font-family: 'Number';
                }
              }
            }

            &>:nth-child(1) {
              border-bottom: 1px solid #4285A6;
              ;
            }

          }
        }
      }
    }

    &:nth-child(4) {
      width: 24%;
    }
  }

  .top_title_main {
    height: 40px;
    line-height: 40px;
    position: relative;
    display: flex;
    justify-content: space-between;

    &>:nth-child(1) {
      text-indent: 55px;
      font-size: 16px;
    }

    &>:nth-child(2) {
      margin-right: 20px;
      font-size: 14px;
      font-family: 'Number';
      color: #3cfafb;
    }

  }

  .StationRainListdiv {
    height: calc(100% - 40px);
  }

  .main_left_index,
  .main_right_index {
    display: inline-block;
    width: 90px;
    height: 40px;
    vertical-align: middle;
  }

  .jcyj_indexMain {
    margin: 0px 20px 5px;
    height: calc(100% - 84px);
    position: relative;
    background: url(../../../assets/newimg/specialShapedFrame.png) no-repeat left center;
    background-size: 100% 100%;
    display: flex;
    flex-wrap: wrap;

    &>:nth-child(1) {
      width: 130px;
      height: 130px;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      background: url(../../../assets/newimg/villageTotalSpin.png) no-repeat center center;
      background-size: 84% 81%;
      animation: rotate 2s linear infinite;
      transform-origin: center center;

      &>:nth-child(1) {
        width: 100%;
        height: 100%;
        background: url(../../../assets/newimg/villageTotalOuter.png) no-repeat left center;
        background-size: 100% 100%;
        animation: resolveRotate 2s linear infinite;
        transform-origin: center center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        padding: 22px 0 30px;

        &>:nth-child(1) {
          width: 40px;
          margin-bottom: 4px;
        }

        &>:nth-child(2) {
          font-size: 18px;
          font-family: 'Number';
        }

        &>:nth-child(3) {
          font-size: 14px;
        }
      }
    }

    /* 定义旋转动画 */
    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    /* 定义抗旋转动画 */
    @keyframes resolveRotate {
      from {
        transform: rotate(360deg);
      }

      to {
        transform: rotate(0deg);
      }
    }

    .item {
      transform: translateX(24px);
      display: flex;
      align-items: center;
      font-size: 13px;

      &>:nth-child(1) {
        width: 34px;
        height: 30px;
        margin-right: 16px;
      }

      &>:nth-child(2) {
        text-align: center;

        &>:nth-child(1) {
          font-size: 18px;
          font-family: 'Number';
        }
      }
    }

    &>:nth-child(3),
    &>:nth-child(5) {
      transform: translateX(86px);

    }
  }

  .yjyy_cen_indexMain {
    >div:nth-child(2) {
      background: rgba(3, 34, 55, 0.39);
      height: calc(100% - 60px);
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;

      >div {
        overflow: hidden;
        color: #aec0db;

        >span {
          display: inline-block;
          width: 30%;
          float: left;

          img {
            width: 100%;
          }
        }

        >div {
          float: right;
          width: 65%;
          text-align: left;

        }

        >div span {
          display: block;
          color: #fff;
        }
      }
    }
  }
}

.right_time{
  width: 140px ;
  position: absolute;
  top: 18px;
  right: 270px;
  z-index: 98;
  .el-date-editor {
    border: solid 1px #1E73DC;
  }
}

.section-box {
  width: 100%;
  height: 100%;
}

.main_index_left {
  width: 20%;
  position: absolute;
  top: 75px;
  left: 10px;
  bottom:305px;
  z-index: 98;
  background: url(../../../assets/newimg/bigcontent.png) no-repeat left center;
  background-size: 100% 100%;

  .leftTitle {
    display: flex;
    align-items: center;
    font-size: 18px;
    padding: 5px 0;
    text-shadow: 2px 3px 1px rgba(0, 0, 0, 0.5);
    /*background: url(../../../assets/newimg/内容框标题.png) no-repeat left center;
    background-size: 100% 100%;*/
    text-indent: 60px;
  }

  .area_list>div {
    height: 60px;
    background: url(../../../assets/newimg/ly_bg.png) no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: left;
    align-items: center;
    overflow: hidden;

    >div {
      // color: #aec0db;
      color: #fff;

      span {
        display: block;
        font-size: 24px;
        color: #fff;
      }
    }

    img {
      width: 20%;
      margin: 0 2% 0 15%;
    }
  }

  .area_list>div {
    background: none;
    margin-top: 5%;

    img {
      margin: 0 2% 0 0;
    }
  }
}

.ly_area {
  &>:nth-child(1) {
    display: flex;
    justify-content: center;
    margin: 12px 0 8px;

    &>div {
      font-size: 26px;
      font-family: 'Number';
      background: url(../../../assets/newimg/areaNumber.png) no-repeat;
      background-size: 100% 100%;
      padding: 4px 8px;
      margin: 0 4px;
    }
  }

  &>:nth-child(2) {
    text-align: center;
    background: url(../../../assets/newimg/lymjBg.png) no-repeat;
    background-size: 100% 100%;
    padding: 5px 0;

    &>span {
      font-size: 14px;
      background: url(../../../assets/newimg/lymjNameBg.png) no-repeat right center;
      background-size: 100% 60%;
      padding: 0 20px 0 28px;
    }
  }
}

.list {
  height: calc(100% - 120px);
  text-align: center;
  // margin: 10px 0 0px;
  // padding-bottom:20px;
   padding-top:8px;
  
  &>div {
    height: calc(20% - 15px);
    margin-left: 10px;
    // padding: 15px 0 16px;
    // margin-bottom: 13px;
    padding-top: calc(10% - 23px);
    margin-bottom: 13px;

    &>span {
      font-family: 'Number';
      color: #3cfcfc;
      font-size: 20px;
      margin-left: 30px;
    }

    &>div {
      font-size: 14px;
      margin-left: 50px;
    }
  }

  &>:nth-child(1) {
    background: url(../../../assets/newimg/xiangzhen.png) no-repeat;
    background-size: 94% 100%;
  }

  &>:nth-child(2) {
    background: url(../../../assets/newimg/xingzhengzirancun.png) no-repeat;
    background-size: 94% 100%;
  }

  &>:nth-child(3) {
    background: url(../../../assets/newimg/renkou.png) no-repeat;
    background-size: 94% 100%;
  }

  &>:nth-child(4) {
    background: url(../../../assets/newimg/qishiyedanwei.png) no-repeat;
    background-size: 94% 100%;
  }

  &>:nth-child(5) {
    background: url(../../../assets/newimg/weixianqu.png) no-repeat;
    background-size: 94% 100%;
  }
}</style>
